<template>
  <!-- 品牌列表页 -->
  <view class="brand-list flex flex-dir-c" @touchmove.stop.prevent>
    <!-- 标题 -->
    <!-- 关闭按钮 - X -->
    <!-- <view class="brand-title">
      <u-icon class="icon-close" name="close" :size="34" color="#333333" @click="close()"></u-icon>
      <text>品牌配置</text>
    </view> -->

    <!-- 品牌列表部分 -->
    <view class="brand-list-section" @touchmove.stop.prevent>
      <scroll-view scroll-y :scroll-into-view="pptoView" scroll-with-animation show-scrollbar class="content-list">
        <!-- 全部品牌项 -->
        <view class="brand-all-title flex flex-jc-sb flex-ai-c">
          <view class="allbran" @click="selectedCarConfig({ id: '' })">全部品牌</view>
          <view class="carnum">{{ brandTotal }}辆</view>
        </view>

        <!-- 品牌详细列表 -->
        <view v-for="(item, index) in Brandlist" :id="item.initial" :key="item.initial">
          <view class="b-list">
            <view class="list-cell" v-for="(item1, index1) in item.data" :key="index1">
              <view class="brandcss" @tap="searchBrand(item1)">
                <view class="iconimg"><image :src="'https://files.yzsheng.com/goodimg/brandimg/' + item1.bid + '.png'" mode="aspectFit"></image></view>
                <view :class="xuanzebrand === item1.bid ? 'brannameZT' : 'branname'">{{ item1.brand }}</view>
                <view class="carnum">{{ item1.carNumber }}条</view>
                <view class="Spin" v-if="type!=1">
                  <view :class="xuanzebrand === item1.bid ? 'ppjiantougo' : 'ppjiantou'">
                    <u-icon name="arrow-right" color="#9A9A9A" size="28rpx"></u-icon>
                  </view>
                </view>
              </view>
              <view class="xieliecss" v-if="xuanzebrand === item1.bid && type!=1">
                <view class="xilie" v-for="(item2, index2) in CartypeList" :key="index2">
                  <view class="cartycss" @tap="XLsearchBrand(item2)">
                    <view :class="pzxuanzebrand === item2.carTypeId ? 'xilienamezt' : 'xiliename'">{{ item2.carTypeName }}</view>
                    <view class="Spin">
                      <view :class="pzxuanzebrand === item2.carTypeId ? 'ppjiantougo' : 'ppjiantou'">
                        <u-icon name="arrow-right" color="#9A9A9A" size="28rpx"></u-icon>
                      </view>
                    </view>
                  </view>
                  <view class="peizhibox">
                    <view class="peizhicss" v-if="pzxuanzebrand === item2.carTypeId">
                      <view class="peizhi" v-for="(item3, index3) in configureList" :key="item3.id">
                        <view :class="xuanzebrand ? 'peizhigo' : 'peizhixz'"></view>
                        <view class="peizhiname" @click="selectedCarConfig(item3)">{{ item3.name }}</view>
                      </view>
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>        
      </scroll-view>
    </view>
    
    <!-- 字母索引 -->
    <view class="floor flex flex-dir-c flex-jc-sb">
      <view v-for="(item, index) in indexlist" :data-id="item" :key="index" @click="bindToView" class="floor-item">{{ item }}</view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'brandList',
  data() {
    return {
      Brandlist: [], //品牌列表
      CartypeList: [], // 车型列表
      xuanzebrand: '',
      pzxuanzebrand: '',
      indexlist: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'],
      pptoView: 'A',
    }
  },
  props:['type'],
  computed: {
    //品牌车子总条数
    brandTotal() {
      if (this.Brandlist.length !== 0) {
        let sum = 0
        this.Brandlist.forEach(item => {
          item.data.forEach(c => {
            sum += c.carNumber
          })
        })
        return sum
      } else {
        return 0
      }
    }
  },

  methods: {
    // 下拉菜单每下拉一次，都会重新创建此组件
    // 初始化组件时判断车品牌列表如果有数据，则不再请求获取车品牌列表
    init() {
      let list = this.$store.state.indexHome.carBrandList
      if (list.length === 0 ) {
				console.log('brand111')
        this.GetCarBrandList() //品牌接口
      } else {
				// console.log('brand222')
        this.Brandlist = list
      }
    },
    
    // 品牌接口请求
    async GetCarBrandList() {
      try {
        const res = await this.$api.common.GetCarBrandList()
        this.Brandlist = res.data
        this.$store.commit('setCarBrandList', res.data)
        console.log(res.data, '品牌')
      } catch (err) {
        console.log(err)
      }
    },
    // 车型配置接口请求
    async GetCarModelAndConfigList(typeid) {
      try {
        let data = {
          Bid: typeid
        }
        const res = await this.$api.common.GetCarModelAndConfigList(data)
        this.CartypeList = res.data.cartypeList
      } catch (err) {
        console.log(err)
      }
    },
    //品牌
    async getBrandDataGroup() {
      try {
        const res = await this.$api.jsonData.brandDataGroup()
        // console.log(res,'1')
        this.compCount(res.data, sum => {
          this.Brandlist = sum
        })
      } catch (e) {
        console.log(e)
      }
    },
    //计算品牌车子条数
    compCount(list, callback) {
      let arr = JSON.parse(JSON.stringify(list))
      arr.forEach(item => {
        item.BrandList.forEach(b => {
          b.CartypeList.forEach(ct => {
            b.count = b.count ? b.count + ct.CarList.length : ct.CarList.length
          })
        })
      })
      callback(arr)
    },

    //选择系列
    XLsearchBrand(type) {
      if (this.pzxuanzebrand === type.carTypeId) {
        this.pzxuanzebrand = ''
        return
      }
      this.pzxuanzebrand = type.carTypeId

      this.configureList = type.carList[0].list
    },

    searchBrand(type) {
			if(this.type==1){
				this.$emit('getBrand',type.brand)
				this.$emit('close')
			}
      if (this.xuanzebrand === type.bid) {
        this.xuanzebrand = ''
        return
      }
      this.xuanzebrand = type.bid

      this.GetCarModelAndConfigList(type.bid)
    },
    
    //选择品牌关闭并搜索
    selectedCarConfig(type) {
      this.$emit('change', type.id)
      this.$emit('close')
    },

    // 关闭当前列表
    close() {
      this.$emit('close')
    },
    
    // 品牌字母索引到对应内容
    bindToView(event) {
      var id = event.currentTarget.dataset.id
      this.pptoView = id
    },
  },

  created() {
		setTimeout(()=>{
			this.init()
		},1000)
    
  }
}
</script>

<style lang="scss" scoped>
.brand-list {
  background-color: #f6f6f6;
  height: 100%;
  position: relative;

  .brand-title {
    padding: 26rpx 0;
    background-color: #fff;
    font-size: 36rpx;
    font-weight: 500;
    color: #333333;
    text-align: center;
    position: relative;

    .icon-close {
      position: absolute;
      top: 50%;
      left: 20rpx;
      transform: translateY(-50%);
    }
  }

  .brand-list-section {
    height: 100%;
    padding: 0 22rpx;
    margin-top: 10rpx;
    background-color: #fff;
    overflow: hidden;
    .content-list {
      width: 100%;
      height: 100%;
    }
  }
  
  // 字母索引
  .floor {
    position: absolute;
    top: 100rpx;
    right: -12rpx;
    width: 44rpx;
    // height: calc(100vh - 260rpx);
    line-height: 28rpx;
    text-align: center;
    font-size: 20rpx;
    font-weight: bold;
    color: #fbb000;
  }
}
// 全部品牌
.brand-all-title {
  padding: 20rpx 40rpx 20rpx 0;
  border-bottom: 2rpx solid #eee;
}

// 品牌列表样式
.b-list {
  background: rgba(255, 255, 255, 1);
  border-radius: 10rpx;

  .list-cell {
    box-sizing: border-box;
    width: 100%;
    padding: 10rpx 0px 0px 0px;
    overflow: hidden;
    color: #323233;
    font-size: 14px;
    line-height: 24px;
    background-color: #fff;
    border-bottom: 1px solid #eeeeee;
  }

  .brandcss {
    display: flex;
    flex-direction: row;

    .iconimg {
      image {
        width: 66rpx;
        height: 66rpx;
      }
    }
  }
}

.Brandcss {
  background: rgba(255, 255, 255, 1);
  border-radius: 10rpx;

  .list-cell {
    box-sizing: border-box;
    width: 100%;
    padding: 10rpx 0px 0px 0px;
    overflow: hidden;
    color: #323233;
    font-size: 14px;
    line-height: 24px;
    background-color: #fff;
    border-bottom: 1px solid #eeeeee;
  }

  .brandcss {
    display: flex;
    flex-direction: row;

    .iconimg {
      image {
        width: 66rpx;
        height: 66rpx;
      }
    }
  }
}

.brandcss {
  display: flex;
  flex-direction: row;

  &.title-box {
    padding: 0rpx 40rpx 20rpx 0;
    margin: 0 30rpx;
    border-bottom: 2rpx solid #eee;
  }
}

.iconimg {
  image {
    width: 66rpx;
    height: 66rpx;
  }
}

.branname {
  text-align: left;
  font-size: 30rpx;
  font-family: PingFang SC;
  font-weight: 500;
  color: rgba(102, 102, 102, 1);
  line-height: 80rpx;
  margin-left: 50rpx;
  width: 50%;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.brannameZT {
  text-align: left;
  font-size: 30rpx;
  font-family: PingFang SC;
  font-weight: 500;
  color: #fbb000;
  line-height: 80rpx;
  margin-left: 50rpx;
  width: 50%;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.allbran {
  font-size: 34rpx;
  color: #333333;
}

.carnum {
  margin-top: 10rpx;
  width: 30%;
  text-align: right;
  font-size: 32rpx;
  color: #666666;
}

.Spin {
  width: 100rpx;
  padding-left: 30rpx;
}

/* 下展*/
.ppjiantougo {
  margin-top: 10rpx;
  width: 10%;
  text-align: center;
  font-size: 32rpx;
  color: #666666;
  transform: rotate(90deg);
  transition: 0.3s;
  padding-right: 20rpx;
}

/* 折叠 */
.ppjiantou {
  margin-top: 10rpx;
  width: 10%;
  text-align: center;
  font-size: 32rpx;
  color: #666666;
  transform: rotate(0deg);
  transition: 0.3s;
  padding-right: 20rpx;
}

.cartycss {
  display: flex;
  flex-direction: row;
}

.xiliename {
  text-align: left;
  font-size: 30rpx;
  font-family: PingFang SC;
  font-weight: 500;
  color: rgba(102, 102, 102, 1);
  line-height: 80rpx;
  margin-left: 114rpx;
  width: 520rpx;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.list-cell2 {
  box-sizing: border-box;
  padding: 10rpx 0px 0px 0px;
  overflow: hidden;
  color: #323233;
  font-size: 14px;
  margin-left: 30rpx;
  line-height: 24px;
  background-color: #fff;
  border-bottom: 1px solid #eeeeee;
}

.xilienamezt {
  text-align: left;
  font-size: 30rpx;
  font-family: PingFang SC;
  font-weight: 500;
  color: #fbb000;
  line-height: 80rpx;
  margin-left: 114rpx;
  width: 520rpx;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.peizhibox {
  .peizhicss {
    background: #f6f6f6;
    border-radius: 10rpx;
    padding: 22rpx;
    width: 642rpx;

    .peizhi {
      padding: 4rpx 0rpx;
      display: flex;
      flex-direction: row;

      /* 未选 */
      .peizhixz {
        font-size: 26rpx;
        font-family: PingFang SC;
        font-weight: 500;
        color: #666666;
        margin-top: 3rpx;

        image {
          margin-left: 16rpx;
          width: 40rpx;
          height: 40rpx;
          transform: rotate(-90deg);
        }
      }

      /* 已选配置 */
      .peizhigo {
        font-size: 26rpx;
        font-family: PingFang SC;
        font-weight: 500;
        color: #666666;
        margin-top: 3rpx;

        image {
          margin-left: 16rpx;
          width: 40rpx;
          height: 40rpx;
          transform: rotate(0deg);
        }
      }

      .peizhiname {
        text-align: left;
        font-size: 26rpx;
        font-family: PingFang SC;
        font-weight: 500;
        color: #666666;
        margin-left: 90rpx;
        width: 520rpx;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
      }
    }
  }
}
</style>
